<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>填写订单信息</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>


<style>
    /* 全局样式重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        overflow: hidden;
    }

    .order_body {
        width: 400px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #qrcode {
        width: 100%;
        height: auto;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    button {
        display: block;
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    button:hover {
        background-color: #0056b3;
    }
</style>
<body>


<div class="order_body layui-container">
    <div style="font-size: 30px;text-align: center;">请扫码支付</div>
    <img id="qrcode" src="easyfile/025cedcfc7715b15528533d75287c9db.jpeg">
    <button id="backButton">返回主页</button>
</div>
<script>
    document.getElementById('backButton').addEventListener('click', function () {
        // 这里将'/'替换为你的主页实际路径
        window.location.href = 'shopping/index';
    });
</script>


<script src="layui/layui.all.js"></script>
<script th:inline="javascript">
    const $ = layui.$;
    const layer = layui.layer;
    const form=layui.form;
    const id=/*[[${id}]]*/;//订单的id
    if(!id){
        location.href="shopping/index";
    }
    $.ajax({
        url:'orders/payment',
        data:{id:id},
        success:function(result){

            let code=result.code;
            if(code==200){
                let imgcode=result.data;
                console.log(imgcode);
                $("#qrcode").attr("src","data:image/png;base64,"+imgcode);
            }else{
                layer.msg("订单异常",{icon:2});
                setTimeout(function(){
                    location.href="shopping/index";
                },2000);

            }
        }
    });

    let stateimterval=setInterval(function(){
        $.ajax({
            url:"orders/getorderstate",
            data:{id:id},
            success:function(result){

                if(result.data>0){
                    layer.msg("支付成功",{icon:1});

                    clearInterval(stateimterval);
                    setTimeout(function(){
                        //跳转到我的订单页面
                        location.href="shopping/index";
                    },1800)
                }
            }
        });
    },1500)
</script>
</body>
</html>